<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入重置样式-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--引入结构样式-->
		<link rel="stylesheet" type="text/css" href="css/shopCar.css"/>
		<!--引入小图标-->
		<link rel="icon" href="img/favicon.ico" />
		<!--引入font图标-->
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
	</head>
	<body>
		<!--header区域-->
		<div id="header">
			<div class="header-con">
				<div class="left" style="float: left;">
					<div>
						<a href="index.html">
							<span>返回首页</span>
						</a>
					</div>
					<div>
						<a>
							<span>网站导航</span>
							<i class="iconfont icon-xia"></i>
						</a>						
					</div>
					<div>
						<a>
							<span>商家入驻</span>
							<i class="iconfont icon-xia"></i>
						</a>
					</div>
					<div>
						<a>
							<span>客户服务</span>
							<i class="iconfont icon-xia"></i>
						</a>
					</div>
				</div>
				<div class="right" style="float: right;">
					<div class="enter">
						<a>155******15</a>
						<i class="iconfont icon-xia"></i>
					</div>
					<ul>
						<li>
							<a>我的订单</a>
							<i class="iconfont icon-xia"></i>
						</li>
						<li>
							<a>我的易购</a>
							<i class="iconfont icon-xia"></i>
						</li>
						<li>
							<a>苏宁会员</a>
							<i></i>
						</li>
						<li class="fixed-shopp">
							<s class="iconfont icon-gouwuchekong"></s>
							<a>购物车</a>
							<span>0</span>
							<i class="iconfont icon-xia"></i>
						</li>
						<li>
							<a>易付宝</a>
						</li>
						<li>
							<a>企业采购</a>
						</li>
						<li>
							<a>手机苏宁</a>
							<i class="iconfont icon-xia"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--search区域-->
		<div id="search">
			<div class="search-con">
				<div class="left">
					<a href="index.html"><img src="img/159601671210506961.png"/></a>
				</div>
				<div class="right">
					<div class="search-box">
						<i></i>
						<input type="text"/>
					</div>
					<a>搜索</a>
				</div>
				<div class="site">
					<div class="city-select">
						<span>送货至</span>
						<div class="city">
							<a><em>深圳 宝安区 全区</em><b></b></a>							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--main区域-->
		<div id="main">
			<div class="main-con">
				<!--无商品时的状态-->
				<div class="cart-empty">
					<h2>
						购物车还是空空的呢，快去 <a href="index.html">首页</a>
						逛逛吧~~</h2>
					<p>
						您可以
						<a>查看我的关注>></a>
					</p>
				</div>
				<!--有商品时的状态-->
				<div class="cart-wrapper">
					<div class="w-header">
						<div><label></label>全选</div>
						<div>商品信息</div>
						<div>规格</div>
						<div>单价（元）</div>
						<div>数量</div>
						<div>小计（元）</div>
						<div>操作</div>
					</div>
					<div class="w-body"></div>
					
					<div class="w-footer">
						<div class="left">
							<label style="margin-top: 22px;"></label>
							<span>全选</span>
							<a>删除选中商品</a>
						</div>
						<div class="right">
							<div class="fl">
								<div><img src="img/20210527.png"/></div>
								<a style="font-size: 12px;">已选商品0件</a>
							</div>
							<div class="rl">去结算</div>
						</div>
					</div>				
				</div>
			</div>
		</div>
		<!--footer区域-->
		<div id="footer">
			<div class="footer-bottom">
				<div class="bottom-con">
					<p class="p-list">
						<a>苏宁互联</a>
						<span>|</span>
						<a>苏宁金融</a>
						<span>|</span>
						<a>苏宁支付</a>
						<span>|</span>
						<a>PP视频</a>
						<span>|</span>
						<a>红孩子</a>
						<span>|</span>
						<a>苏宁物流</a>
						<span>|</span>
						<a>手机苏宁</a>
						<span>|</span>
						<a>零售云</a>
						<span>|</span>
						<a>苏宁云</a>
						<span>|</span>
						<a>知识产权举报</a>
						<span>|</span>
						<a>投资者关系</a>
						<span>|</span>
						<a>苏宁智能</a>
					</p>
					<p class="p-list">
						<a>联系我们</a>
						<span>|</span>
						<a>诚聘英才</a>
						<span>|</span>
						<a>合作招商</a>
						<span>|</span>
						<a>广告平台</a>
						<span>|</span>
						<a>苏宁联盟</a>
						<span>|</span>
						<a>苏宁招标</a>
						<span>|</span>
						<a>隐私政策</a>
						<span>|</span>
						<a>用户体验提升计划</a>
						<span>|</span>
						<a>股东会员认证</a>
					</p>
					<p>
						Copyright© 2020-2021深圳市云网万店电子商务有限公司版权所有
						<span>|</span>
						<a style="padding-left: 25px;">
							<i></i>
							苏公网安备 32010202010078号
						</a>
						<span>|</span>
						<a>粤ICP备2021027996号</a>
					</p>
					<p>
						<a>合字B2-20180025</a>
						<span>|</span>
						<a>合字A1.B1.B2-20180017</a>
						<span>|</span>
						<a>出版物经营许可证新出发苏批字第A-243号</a>
						<span>|</span>
						互联网药品信息服务资格证书
						<a>（苏）-非经营性-2021-0032</a>
					</p>
					<p>
						<a>经营证照</a>
						<span>|</span>
						<a>网络文化经营许可证：苏网文〔2018〕10580-203号</a>
						<span>|</span>
						<a>互联网违法和不良信息举报邮箱：kfpt-yy@cnsuning.com</a>
						<span>|</span>
						<a>举报电话：02566996699-865948</a>
					</p>
					<p>
						<a>医疗器械网络交易服务第三方平台备案凭证-（苏）网械平台备字（2018）第00052号</a>
						<span>|</span>
						<a>变更公告</a>
						<span>|</span>
						<a>营业执照</a>
						<span>|</span>
						<a>合字B2-20210115</a>
					</p>
					<p>本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p>
					<div>
						<a><img src="img/wxrz.png"/></a>
						<a><img src="img/chengxin.png"/></a>
						<a><img src="img/unicom.png"/></a>
						<a><img src="img/dianxin.jpg"/></a>
						<a><img src="img/dianzizhizhao.png" style="width: 24px;"/></a>
						<a><img src="img/netsafe1.png" style="width: 72px;"/></a>
						<a><img src="img/netsafe2.png" style="width: 144px;"/></a>
						<a><img src="img/netsafe3.png" style="width: 166px;"/></a>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			showShop();
			function showShop(){
				$.ajax({
					url:"./interface/showlist.php",
					success:function(date){
						$('.main-con .cart-wrapper .w-body').empty();
						if(date.code){						
							var arr = date.data
							if(arr){
								//如果有商品,table显示,div隐藏
								$('.main-con .cart-wrapper').show()
								$('.main-con .cart-empty').hide();
								//在$('.main-con .cart-wrapper .w-body')里面展示商品信息
								console.log($('.main-con .cart-wrapper').children())
								$('.main-con .cart-wrapper .w-body').empty();
								$.each(arr,function(i,item){
									console.log($('.main-con .cart-wrapper .w-body'))
									$sum = item.product_price * item.product_num
									$('.main-con .cart-wrapper .w-body').append(`
									<div class="title">
										<label></label>
										<i></i>
										<b>苏宁自营</b>
										<p>
											运费
											<span>￥0.00</span>
										</p>
									</div>
									<div class="content">
										<div class="con-header">
											<div class="left">
												<span>满减</span>
												<a>满990元减111元</a>
												<a>去凑单</a>
											</div>
											<b><i>￥</i>0.00</b>
										</div>
										<div class="line"></div>
										<div class="shop" id="${item.product_id}">
											<label></label>
											<div class="shop-con">
												<div class="img">
													<img src="${item.product_img}"/>
												</div>
												<a>${item.product_name}</a>									
											</div>
											<div class="shopType">
												<p>型号：${item.product_name}</p>
												<p>版本：官方标配</p>
											</div>
											<div class="shopPrice">
												<span>￥${item.product_price}</span>
												<span>大聚惠</span>
											</div>
											<div class="item-amount">
												<a class="jian">-</a>
												<input type="text"  value="${item.product_num}"/>
												<a class="add">+</a>
											</div>
											<b class="shopSum">￥${$sum}</b>
											<div class="del">
												<a>移入关注</a>
												<a class="dele">删除</a>
											</div>
										</div>
									</div>`)
								});
							}
						}					
					},
					dataType:'json'
				});
			}
			
			// 点击+增加一个商品数量,点击-减少一个商品数量
			$('.cart-wrapper').click(function(e){
            var target = e.target;
//          console.log($(target.className=='add'))
//          console.log($(target.className=='jian'))
//             target是一个dom节点
			console.log(target.className)
            if((target.className=='add')||(target.className=='jian')){
                // 点击+增加一个商品数量,点击-减少一个商品数量
                $.ajax({
                    url:'http://localhost/snyg/interface/updatewq.php',
                    data:{
                        type:target.className,
                        id:$(target).parents()[1].id
                    },
                    success:function(res){
						//console.log($(target).parents()[1].id)
                    	console.log(res)
                        if(res.code){
                            showShop()
                        }
                    },
                    dataType:'json'
                })

            }else if(target.className=='dele'){
                // 点击删除按钮删除一个商品
                $.ajax({
                    url:'http://localhost/snyg/interface/delwq.php',
                    data:{
                        id:$(target).parents()[1].id
                    },
                    success:function(res){
                        if(res.code){
							alert('商品删除成功')
                            showShop()
                        }
                    },
                    dataType:'json'
                })
            }
        })
			
			
		</script> 
	</body>
</html>
